<template name="updateModal">
	<view class="modalMask" :class="[show?'ani':'']" v-if="show" >
		<view class="modalBox" @tap.stop>
			<text class="boxTitle">有新版本可以升级了</text>
			<view class="upDateCnt" v-if="upNotice.length>0">
				<text v-for="(item,index) in upNotice" :key="index">{{item}}</text>
				
			</view>
			<view class="btnGroup">
				<button class="cancleBtn" v-if="updateInfo.type==1" @tap="close">暂不升级</button>
				<button class="confirmBtn" @tap="upDate">立即升级</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	import COMM from  "@/common/common.js";
	export default{	
		name:'updateModal',		//组件名称
		computed:{
			...mapState({
				updateInfo:state=>state.upDate.updateInfo
			}),
			...mapGetters({
				upNotice:'getUpdateInfo'
			})
		},
		props:{
			
		},
		// 组件参数
		data(){
			return {
				show:false
			}
		},
		// 组件方法
		methods:{
			close(){
				this.show=false;
				if(this.updateInfo.type==1){
					uni.showTabBar({})
				}
			},
			upDate(){
				if(uni.getSystemInfoSync().platform=='ios'){
					COMM.updateApp(this.updateInfo);
				}else{
					COMM.updateApp(this.updateInfo);
					this.close()
				}
				
			}
		},
		created() {
			// 强制更新
			uni.$on("showForceUpdata",()=>{
				uni.hideTabBar({})
				this.show=true
			})
		}
	}
</script>

<style lang="less">
	@import "../../common/public.less";
	.modalMask{
		position: fixed;
		width: 100%;
		height: 0;
		background-color: rgba(0,0,0,0.5);
		z-index: 99999;
		top: 0;
		left: 0;
		display: flex;
		justify-content:center;
		align-items: center;
		transition: all 0.5s;
		.modalBox{
			background-color: #FFFFFF;
			width: 76%;
			border-radius: 20upx;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			.boxTitle{
				font-size: 40upx;
				padding: 30upx;
				font-weight: bold;
				text-align: center;
				border-bottom: 1px solid #dddddd;
			}
			.upDateCnt{
				padding: 30upx 30upx;
				display: flex;
				flex-direction: column;
				text{
					font-size: 32upx;
					margin-bottom: 18upx;
				}
			}
			.btnGroup{
				display: flex;
				border-top: 1px solid #dddddd;
				button{
					flex-grow: 1;
					border-radius: 0;
					font-size: 32upx;
					height: 100upx;
					line-height: 100upx;
				}
				button::after{
					border: none;
					border-radius: 0;
				}
				.cancleBtn{
					border: none;
					outline: none;
					
					border-right: 1px solid #dddddd;
				}
				.confirmBtn{
					background-color: @color-m;
				}
			}
		}
	}
	.ani{
		height: 100%;
	}
</style>
